<template>
  <div class="list_acticle">
   <div class="top">
     <div class="top_top">
       <router-link to="/community">
         <Icon type="chevron-left"></Icon>
       </router-link>
     </div>
     <div class="top_center">
       <p>欢迎点评和观看</p>
     </div>
     <div class="top_right">
       <Button type="primary" @click="modal1 = true">笔记本</Button>
       <Modal style="text-align: center"
              v-model="modal1"
              title="这是一个记录框，在这你可以记录你想记录的问题"
              @on-ok="ok"
              @on-cancel="cancel">
         <p>你的问题：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p>
         <p>你的思路：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p>
         <p>解决方法：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p>
       </Modal>
     </div>
   </div>
    <div class="main">
      <div class="main_top"><span>{{gettitle[0].title}}</span></div>
      <div class="main_center">
        <img :src="gettitle[0].head">
        <div class="main_center_world">
          <span>{{gettitle[0].autho}}</span>
          <span v-if="gettitle[0].vip" class="vip">vip用户</span>
          <span v-else="" class="vip">普通用户</span>
        </div>
        <div class="main_center_number">
          <span class="time">{{getDateDiff(gettitle[0].time)}}</span>
          <span class="click">点击量:{{gettitle[0].click}}</span>
        </div>
      </div>
    </div>
    <hr color="#e3e8ee">
    <div class="main_bottom">
      <p>文章内容</p>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        value4:'',
        modal1: false
      }
    },
    computed:{
      ...mapState(['lists']),
      gettitle:function(){
        var id=this.id
        return this.lists.filter(function(number){//筛选
          return number.id==id
        })
      },
      id(){
        return this.$route.params.id
      }
    },
    created(){

    },
    methods: {
      ok () {
        this.$Message.info('点击了确定');
      },
      cancel () {
        this.$Message.info('点击了取消');
      },
      getDateDiff(dateTimeStamp){
        var minute = 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var now = Math.round(new Date() / 1000)
        var diffValue = now - dateTimeStamp;
        if(diffValue < 0){return;}
        var monthC =diffValue/month;
        var weekC =diffValue/(7*day);
        var dayC =diffValue/day;
        var hourC =diffValue/hour;
        var minC =diffValue/minute;
        var result;
        if(monthC>=12){
          return new Date(parseInt(dateTimeStamp) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
        }
        if(monthC>=1){
          result="" + parseInt(monthC) + "月前";
        }
        else if(weekC>=1){
          result="" + parseInt(weekC) + "周前";
        }
        else if(dayC>=1){
          result=""+ parseInt(dayC) +"天前";
        }
        else if(hourC>=1){
          result=""+ parseInt(hourC) +"小时前";
        }
        else if(minC>=1){
          result=""+ parseInt(minC) +"分钟前";
        }else
          result="刚刚";
        return result;
      }
    }
  }
</script>



<style scoped>
  .top{background: #464c5b;color: #ffffff;overflow: hidden;height:40px;}
  .top .ivu-icon {font-size: 25px;line-height: 40px;}
  .top_top{width:20%;float: left; text-align: left;}
  .top_center{width:60%;float: left;text-align: center;line-height: 40px;font-size: 20px}
  .top_right{width:20%;float: left;text-align: right;line-height: 40px}
  .main_top{width: 80%; font-size: 16px;text-align: left;}
  .main_center{overflow: hidden;}
  .main_center img{width:40px;height: 40px;border-radius:20px;float: left;}
  .main_center_world{float: left;line-height: 40px;}
  .main_center .vip{color: #00cc66;font-size: 16px;font-weight: bolder;}
  .main_center_number{width:100%;float: left;font-size: 14px;}
  .main_center_number .time{float: left;width: 50%;text-align: center;color: #3399ff;}
  .main_center_number .click{float: right;width:50%;text-align: right;color: gainsboro;}
  .main_bottom p{font-size: 16px; font-weight:bolder;}
</style>
